<template>
  <div id="orderPageTitleView" @click="clickorderPageTitleView">
    <div
      :class="{
        shortTitle: isShortMargin,
        title: !isShortMargin,
        lightWrite: isLightWrite,
      }"
      class="title"
    >
      {{ title }}
    </div>
    <div
      :class="{
        shortContent: isShortMargin,
        content: !isShortMargin,
        lightWrite: isLightWrite,
        phoneColor:isPhone,
      }"
    >
      {{ content }}
    </div>
  </div>
</template>

<script>
import { actionWithLink } from "@/utils/utils";

export default {
  name: "OrderPageTitleView",
  props: {
    title: String,
    content: String,
    isLightWrite: Boolean,
  },
  computed: {
    isShortMargin() {
      if (
        this.title === "订单编号:" ||
        this.title === "创建时间:" ||
        this.title === "金额"
      ) {
        return true;
      }
      return false;
    },
      isPhone(){
          if (this.title !== "联系方式") {
              return false;
          }else {
              return true;
          }
      }
  },
  methods: {
    clickorderPageTitleView() {

      if (this.title !== "联系方式") {
        return;
      }

      var reg = /(1[3456789]\d{9})|(\d{10})|(0\d{2,3}-\d{7,8})|(\d{3}-\d{3}-\d{4})/g;
      var telList = this.content.match(reg); //返回识别到的手机 数组

      if (telList) {
        var phone = telList[0];
        actionWithLink("tel://" + phone);
      }
    }
  }
};
</script>

<style scoped>
#orderPageTitleView {
  margin-top: 0.2rem;
  width: 100%;
  display: flex;
  /*flex-flow: row;*/
}

.title {
  width: 5.333333333333333rem;
  height: 1.4rem;
  font-size: 0.9rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(122, 132, 145, 1);
  line-height: 1.4rem;
  flex-shrink:0;

}
.content {
  /*height: 1.4rem;*/
  font-size: 0.9rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.4rem;
}

.shortTitle {
  width: 4.888888888888888rem;
  height: 1.3333333333333333rem;
  font-size: 0.9333333333333333rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color:rgba(185,209,255,1);

  line-height: 1.3333333333333333rem;
}
.shortContent {
  height: 1.3333333333333333rem;
  font-size: 0.9333333333333333rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color:rgba(185,209,255,1);

  line-height: 1.3333333333333333rem;
}
.lightWrite {
  color: #f0f1f5;
}
.phoneColor{
  color: #397BE6;
}
</style>
